import * as echarts from 'echarts'

export default {
  mounted () {
    const myChart = this.initEchart(this.id)
    const option = this.deployOption()
    option && myChart.setOption(option)
  },
  methods: {
    // 返回颜色或渐变色
    color (style, type = 'linear') {
      if (style.color) return style.color
      return {
        type: type,
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 1, color: style.startColor // 100% 处的颜色
        }, {
          offset: 0, color: style.endColor // 0% 处的颜色
        }]
      }
    },
    // 需要隐藏的属性
    hiddenDeploy (arr) {
      const newObj = {}
      arr.map(item => {
        newObj[item] = {
          show: false
        }
      })
      return newObj
    },
    // 配置圆环的分段数
    subSum () {
      const data = []
      for (let i = 1; i <= this.data.subSum; i++) {
        if (i % 2 === 0) {
          data.push({ value: 100, name: '2' })
        } else {
          data.push({ value: 100, name: '1' })
        }
      }
      return data.length > 0 ? data : [{ value: 100, name: '1' }, { value: 100, name: '2' }]

    },
    // 请求圆心图片
    requireImgUrl (url) {
      if (!url) return ''
      // 设想如果用户不传图片、传错图片的情况，如何处理
      let img
      try {
        // 这一步要对用户传值的处理，避免出现相对路径问题
        img = require('@/' + url.replace(/@\//, ''))
      } catch (err) {
        // 如果图片读取错误，使用错误图片
        // 支持传值，如果不传应使用线上图片代替
        img = require('@/assets/error.png')
      }
      return img
    },
    // 初始化图表对象
    initEchart (id) {
      var chartDom = document.getElementById(id)
      var myChart = echarts.init(chartDom)
      return myChart
    }
  }
}
